<template>
  <Form :model="formState" ref="formRef" class="md:flex-row w-full flex-wrap" v-bind="formItemLayout">
    <div class="md:flex w-full md:justify-between">
      <Col :span="6">
        <FormItem name="stepType" label="应用">
          <div class="md:w-32">
            <Select v-model:value="appId" placeholder="请选择应用" :options="appOptions" :allowClear="true"> </Select>
          </div>
        </FormItem>
      </Col>
      <Col :span="12">
        <FormItem name="time" style="width: 300px" label="时间">
          <RangePicker v-model:value="timeRange" :format="format" />
        </FormItem>
      </Col>
      <Col :span="4">
        <FormItem>
          <div class="md:flex md:justify-end">
            <Button type="primary" shape="circle" @click="onSubmit">
              <template #icon><SearchOutlined /></template>
            </Button>
            <Button style="margin-left: 5px" shape="circle" @click="resetForm">
              <template #icon> <RedoOutlined /> </template>
            </Button>
          </div>
        </FormItem>
      </Col>
    </div>
  </Form>
</template>

<script setup lang="ts">
import { defineEmits, reactive, ref, onMounted } from 'vue';
import { Moment } from 'moment';
import { Button, Col, Form, FormItem, Select, RangePicker } from 'ant-design-vue';
import { SearchOutlined, RedoOutlined } from '@ant-design/icons-vue';
import { getAppSelectList } from '/@/api/operation-center/common/common';
import { AppTemplateResp } from '/@/api/operation-center/common/model/commonModel';
import { AppPackageSubReqDto } from '/@/api/operation-center/tenant-opertation/user-activity-analysis/model/userActivityAnalysisModel';

const formRef = ref();

const formState = reactive<Record<string, any>>({});

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 24 },
};

// Select 组件属性设置
const appId = ref();
const appOptions = ref<any[]>([]);

// 时间选择框属性设置
// 时间范围选择框相关属性
const timeRange = ref<Moment[]>([]);
const format = ref<string[]>(['YYYY-MM-DD', 'YYYY-MM-DD']);

let startDate = new Date();
startDate.setMonth(startDate.getMonth() - 10);

let tenantDistributionReq: AppPackageSubReqDto;
const emit = defineEmits(['success']);

const onSubmit = async () => {
  formRef.value.validate().then(() => {
    tenantDistributionReq = {
      appId: appId.value,
      startTime: timeRange.value[0].format('YYYY-MM-DD HH:mm:ss'),
      endTime: timeRange.value[1].format('YYYY-MM-DD HH:mm:ss'),
      isNeedSumSub: true,
    };
    emit('success', tenantDistributionReq);
  });
};

// 清空表单参数
const resetForm = () => {
  appId.value = undefined;
  timeRange.value = [];
};

function convertAppOptions(res: AppTemplateResp[]) {
  let options: any[] = [];
  for (let i = 0; i < res.length; i++) {
    let appItem = res[i];
    let appOption = {
      label: appItem.name,
      value: appItem.id,
    };
    options.push(appOption);
  }
  appOptions.value = options;
}

onMounted(() => {
  getAppSelectList().then((res) => {
    convertAppOptions(res);
  });
});
</script>
